<script setup>
import { computed, ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import http from '@/config/axios-config'
import fromLayout from '@/config/form-layout'
import SaveDialog from '@/components/plug-in/save-dialog'

const props = defineProps({
  visible: Boolean,
  form: [Object, Boolean]
})
const emit = defineEmits(['update:visible', 'complete'])
let show = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

let saveForm = ref({})
let saveModal = ref()
let saveLoading = ref(false)
let saveItemLayout = ref(fromLayout)
let isCreate = ref(false)
let roles = ref([])
let roleLoading = ref(false)

let defaultForm = { UserStatus: 1 }
const submitHandler = () => {
  saveModal.value.validateFields().then(() => {
    saveLoading.value = true
    let url = isCreate.value ? '/users/create' : '/users/update'
    http.post(url, saveForm.value).then(res => {
      saveLoading.value = false
      if (res.code === 200) {
        message.success(res.msg)
        show.value = false
        saveForm.value = defaultForm
        emit('complete')
      }
    })
  }).catch(() => {})
}

const loadRoles = () => {
  if (roles.value.length) return false
  roleLoading.value = true
  http.get('/role/select').then(res => {
    roleLoading.value = false
    if (res.code === 200) {
      roles.value = res.result.select
    }
  })
}

watch(() => props.form, () => {
  saveForm.value = props.form ? Object.assign({}, props.form) : defaultForm
  isCreate.value = !props.form
}, { deep: true })

watch(() => props.visible, () => {
  if (props.visible) {
    loadRoles()
  }
})
</script>

<template>
  <save-dialog
      v-model:visible="show"
      :title="isCreate ? '添加管理员' : '编辑管理员'"
      :confirm-loading="saveLoading"
      @ok="submitHandler">
    <div>
      <a-form ref="saveModal" :model="saveForm" v-bind="saveItemLayout">
        <a-form-item name="UserName" label="账号" :rules="[{ required: true, message: '请输入账号' }]">
          <a-input v-model:value="saveForm.UserName" :maxlength="32" autocomplete="off" placeholder="请输入账号"/>
        </a-form-item>
        <a-form-item name="NickName" label="昵称" :rules="[{ required: true, message: '请输入昵称' }]">
          <a-input v-model:value="saveForm.NickName" :maxlength="10" autocomplete="off" placeholder="请输入昵称"/>
        </a-form-item>
        <a-form-item v-if="isCreate" name="UserPassword" label="密码" :rules="[{ required: true, message: '请输入密码' }]">
          <a-input-password v-model:value="saveForm.UserPassword" :maxlength="32" autocomplete="off"
                            placeholder="请输入密码"/>
        </a-form-item>
        <a-form-item name="RoleName" label="角色">
          <a-select
              :loading="roleLoading"
              mode="multiple"
              v-model:value="saveForm.RoleID"
              placeholder="请选择角色"
          >
            <a-select-option :value="item.value" v-for="(item, idx) in roles" :key="idx">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="状态">
          <a-radio-group v-model:value="saveForm.UserStatus">
            <a-radio :value="1">启用</a-radio>
            <a-radio :value="2">删除</a-radio>
            <a-radio :value="3">禁用</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </div>
  </save-dialog>
</template>
